<template>
    <div id="detail">
     <detail-nav-bar class="nav-bar" @titleClick="titleClick" ref="nav"/>
      <scroll class="content" ref="scroll" :probe-type="3" @scroll="contentScroll">
        <div>
          <ul>
            <li v-for="item in $store.state.cartList" >{{ item }}</li>
          </ul>
        </div>
      <detail-swiper :top-images="topImages"/>
      <detail-base-info :goods="goods"/>
      <detail-shop-info :shop="shop"/>
        <detail-goods-info :detail-info="detailInfo" @imageLoad="imageLoad"/>
        <detail-params-info ref="params"/>
        <detail-comment-info ref="comment" :comment-info="commentInfo"/>
        <goods-list ref="recommend" :goods="recommends"/>
      </scroll>
      <detail-bottom-bar @addCart="addToCart"/>
      <back-top @click.native="backClick" v-show="isShowBackTop"/>
      <toast :message="message" :show="show"/>
    </div>
</template>

<script>
  import DetailNavBar from './childComps/DetailNavBar'
  import DetailSwiper from './childComps/DetailSwiper'
  import DetailBaseInfo from './childComps/DetailBaseInfo'
  import DetailShopInfo from './childComps/DetailShopInfo'
  import DetailGoodsInfo from './childComps/GoodsListItem'
  import DetailCommentInfo from './childComps/DetailCommentInfo'
  import DetailParamsInfo from './childComps/DetailParamsInfo'
  import GoodsList from 'components/goods/GoodsList'
  import DetailBottomBar from './childComps/DetailBottomBar'

  //import BackTop from '../../content/backTop/BackTop'


  import {getDetail,Goods,Shop,getRecommend } from "../../network/home"
  import {debounce} from "../../common/utils"
  import {itemListenerMixin,backTopMixin} from "../../common/mixin"
  import { mapActions } from 'vuex'
  import Scroll from "../../content/scroll/Scroll";
  import Toast from "../../content/toast/toast"
    export default {
        name: "Detail",
      components:{
        Scroll,
        DetailNavBar,
        DetailSwiper,
        DetailBaseInfo,
        DetailShopInfo,
        DetailGoodsInfo,
        DetailCommentInfo,
        DetailParamsInfo,
        GoodsList,
        DetailBottomBar,
        Toast
        //BackTop
      },
      mixins:[
        itemListenerMixin,backTopMixin
      ],
      data(){
          return{
            id:null,
            topImages:[ ],
            goods:{ },
            shop:{ },
            detailInfo:{ },

            commentInfo:{ },
            recommends: [],
            itemImgListener:null,
            themeTopYs:[],
            getThemeTopY:null,
            currentIndex:0,
            message:'',
            show:false
            //isShowBackTop:false
          }
      },
      created(){
        //console.log(this.$route.params);
        this.id = this.$route.params.id

        //2.根据id请求详情数据
        getDetail(this.id).then(res=>{
          console.log(res);
          const data = res.data.result
          this.topImages = data.topImages

          //2.获取商品信息
          this.goods = new Goods(data.itemInfo,data.columns,data.shopInfo)
          //3.创建店铺信息
          this.shop = new  Shop(data.shopInfo)
          //4.保存商品的详情数据
          this.detailInfo = data.detailInfo

          //7.取出评论信息
          if(data.rate.cRate !== 0){
              this.commentInfo = data.rate.list[0]
          }
          /*在图片加载完成后才行*/
/*          this.$nextTick(()=>{
            this.themeTopYs = []

            this.themeTopYs.push(0)
            this.themeTopYs.push(this.$refs.params.$el.offsetTop)
            this.themeTopYs.push(this.$refs.comment.$el.offsetTop)
            this.themeTopYs.push(this.$refs.recommend.$el.offsetTop)
            console.log(this.themeTopYs);
          })*/

        })

        //3.请求推荐数据
        getRecommend().then(res =>{
          this.recommends = res.data.list
        })

        //给getThemeTop赋值(对给this.themeTopYs赋值的操作进行防抖)
        this.getThemeTopY = debounce(()=>{
          this.themeTopYs = []
          this.themeTopYs.push(0)
          this.themeTopYs.push(this.$refs.params.$el.offsetTop)
          this.themeTopYs.push(this.$refs.comment.$el.offsetTop)
          this.themeTopYs.push(this.$refs.recommend.$el.offsetTop)
          this.themeTopYs.push(Number.MAX_VALUE)
          console.log(this.themeTopYs);
        },100)
      },
      mounted(){

      },
      updated(){

      },
      destroyed(){
        this.$bus.$off('ItemImageLoad',this.itemImgListener)
      },
      methods:{
          ...mapActions(['addCarts']),
        imageLoad(){
          this.$refs.scroll.refresh()
          this.getThemeTopY()
        },
        titleClick(index){
          console.log(index);
          this.$refs.scroll.scrollTo(0,-this.themeTopYs[index],100)
        },
        contentScroll(position){
          //console.log(position);
          //1.获取y值
          const positionY = -position.y
          //2.positionY和主题值对比
          let length = this.themeTopYs.length
          for (let i =0;i<length-1; i++){
            if (this.currentIndex !== i&&(positionY >=this.themeTopYs[i]&&positionY< this.themeTopYs[i+1])){
              this.currentIndex = i;
              this.$refs.nav.currentIndex = this.currentIndex
            }
/*            if(this.currentIndex !== i&&(i<length - 1&&positionY >= this.themeTopYs[parseInt(i)]&&positionY<
              this.themeTopYs[i+1])||(i === length-1&&positionY >= this.themeTopYs[i])){
              this.currentIndex = i
              console.log(this.currentIndex);
              this.$refs.nav.currentIndex = this.currentIndex
            }*/
          }
          //3.是否显示回到顶部
          //this.isShowBackTop=-(position.y)>1000
          this.listenShowBackTop(position)
        },
/*        backClick(){
          this.$refs.scroll.scrollTo(0,0);
        }*/
        addToCart(){
          //1.获取需要展示的信息
          const product = { }
          product.image = this.topImages[0]
          product.title = this.goods.title
          product.desc = this.goods.desc
          product.price = this.goods.realPrice
          product.id = this.id

          //2.将商品添加到购物车(1.Promise, 2. mapAction)
          //this.$store.state.cartList.push(product)不能直接在state该数据
          //用mapActions映射addCart方法之后可以直接使用this
/*          this.addCarts(product).then(res=>{
         console.log(res)
          })*/
     this.addCarts(product).then(res=>{
       console.log('---'+ res+"222")
       this.show = true;
       this.message = res;
       setTimeout(()=>{
         this.show = false;
         this.message = ''
       },1500)
     })
/*          this.$store.dispatch('addCarts',product).then( res =>{
            console.log('---'+ res+"222")
            this.show = true;
            this.message = res;
            setTimeout(()=>{
              this.show = false;
              this.message = ''
            },1500)
          })*/
/*          this.$store.dispatch('addCart',product).then(res=>{
            console.log('---'+ res+"222")
          })*/
        }
      }
    }
</script>

<style scoped>
  #detail{
    height: 100%;
    position: relative;
    z-index: 9;
    background-color: rgb(255, 255, 255);
  }
  #detail .nav-bar{ position:relative;background-color: #ff2416 }

  #detail .content{
    height:83vh;
    z-index: 8;
  }
</style>
